<!DOCTYPE html>
<html>
<head>
  <title>Leaflet Quick Start Guide Example</title>
  <meta charset="utf-8" />

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="stylesheet" href="../vendor/leaflet.css" />
  <link rel="stylesheet" href="./rolling_stones/style.css" />
  <style>
    #slides{
    }
    /*.slide {
      position: absolute;
      top: 50%;
      left: 100px;
      font-size: 45px;

    }*/

    #map {
      position: absolute;
      top: 0; left: 0;
      width:100%;
      height: 100%;
    }
    #content {
      padding: 0 40px;
      height: 1500px;
    }

    #progress{
      position: absolute;
      top: 0;
      left: 50%;
      z-index: 10;
    }
    #progress li {
      display: inline-block;
    }

    #progress li a {
      display: block;
      width: 9px;
      height: 9px;
      background: url(http://vizzuality.github.io/rollingstonesmap/img/timeBullet.png) 0 0 no-repeat;
    }

    #progress li.active a {
      background: url(http://vizzuality.github.io/rollingstonesmap/img/timeBullet.png) 0 -9px no-repeat;
    }

  </style>
</head>
<body>
  <div id="map" style="width: 100%; height: 100%"></div></div>
  <div id="header">
    <a id="title" href="#"></a>
  </div>
  <div id="slides"></div>
  <div id="progress"></div>

  <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  <script src="../vendor/leaflet.js"></script>
  <script src="../dist/odyssey.js" charset="UTF-8"></script>
  <link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css" />
    <script src="http://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>
  <script src="markdown.js" charset="UTF-8"></script>
  <script src="actions.js" charset="UTF-8"></script>
  <script>


  function DotProgress(el) {
    var count = 0;
    var element = O.Core.getElement(el);

    function _progress() {
      return _progress;
    }

    function render() {
      var html = '<ul>';
      for(var i = 0; i < count; ++i) {
        html += '<li><a href="#' + i + '"></a></li>';
      }
      html += "</ul>";
      element.innerHTML = html;
    }

    _progress.count = function(_) {
      count = _;
      render();
      return _progress;
    }

    // returns an action to activate the index
    _progress.activate = function(activeIndex) {
      return O.Action(function () {
        var children = element.children[0].children;
        for(var i = 0; i < children.length; ++i) {
          children[i].setAttribute('class', '')
        }
        children[activeIndex].setAttribute('class', 'active')
      });
    }

    return _progress;

  }

  O.Template({

    init: function() {
      var map = L.map('map').setView([0, 0.0], 4);
        L.tileLayer('http://0.api.cartocdn.com/base-dark/{z}/{x}/{y}.png', { attribution: 'data OSM - map CartoDB' }).addTo(map);

      // cartodb.createLayer(map, 'http://andrew.cartodb.com/api/v2/viz/0399bc6a-b5d8-11e3-88e7-0e73339ffa50/viz.json')
      //   .addTo(map, 1)
      //   .done(function(){
      //     console.log('hi')
      //   })

      var seq = O.Triggers.Sequential();
      // enanle keys to move
      O.Triggers.Keys().on('map').left().then(seq.next, seq)
      O.Triggers.Keys().on('map').right().then(seq.next, seq)

      var slides = O.Actions.Slides('slides');
      var story = O.Story()

      this.map = map;
      this.story = story;
      this.seq = seq;
      this.slides = slides;
      this.progress = DotProgress('progress').count(10);
    },

    update: function(actions) {
      this.story.clear();

      var sl = actions;

      document.getElementById('slides').innerHTML = ''
      this.progress.count(sl.length);


      document.getElementById('title').innerHTML = actions.global.title;
      // create new story
      for(var i = 0; i < sl.length; ++i) {
        var slide = sl[i];
        var tmpl = "<section class='slide' style='diplay:none'><div class='content'>"
        tmpl += slide.html();
        tmpl += "</section></div>";
        document.getElementById('slides').innerHTML += tmpl;

        var actions = O.Parallel.apply(window, [
          this.slides.activate(i),
          slide(this),
          this.progress.activate(i)
        ]);
        this.story.addState(
          this.seq.step(i),
          actions
        )
      }
      this.story.go(this.seq.current());
    }

  });

  </script>
</body>
</html>

